<script lang="ts" setup>
import { useRouter } from '@/router';
// @ts-ignore
import useMescroll from '@/uni_modules/mescroll-uni/hooks/useMescroll.js';
// @ts-ignore
import MescrollUni from '@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-uni.vue';
import { onMounted, reactive, ref } from 'vue';
import { getMessageList } from '@/api/user';
import { useAuthStore } from '@/store/auth';
import { useLocale } from '@/locale/locale';
import { isWechat } from '@/utils/platform';

const { t } = useLocale();
const authStore = useAuthStore();
const statusBarH = ref(0);
const router = useRouter();
const list = ref<any[]>([]);
const upOption = reactive({
  // 首次自动执行
  auto: false,
  // 数量要大于3条才显示无更多数据
  noMoreSize: 3,
  offset: 10,
  textLoading: '',
  empty: {
    use: false
  }
});
const downOption = reactive({
  textInOffset: '',
  textOutOffset: '',
  textLoading: '',
  textSuccess: ''
});
const { mescrollInit, downCallback } = useMescroll();

const upCallback = async (mescroll: any) => {
  const payload: any = {
    pageNum: mescroll.num,
    pageSize: mescroll.size
  };

  const res = await getMessageList(payload);
  let newList = res.data.list;
  if (!res.data.list) {
    newList = [];
  }
  mescroll.endBySize(newList.length, res.data.count);
  if (mescroll.num == 1) {
    list.value = [];
  }
  list.value = list.value.concat(newList);
};

function navigateToLogin() {
  if (!authStore.isLoggedIn) {
    uni.navigateTo({
      url: '/pages/auth/login'
    });
  }
}

onMounted(() => {
  uni.getSystemInfo({
    success: (res) => {
      statusBarH.value = res.statusBarHeight || 0;
    }
  });
});
</script>

<template>
  <uni-nav-bar
    v-if="isWechat()"
    :border="false"
    :title="t('LAKey_message')"
    fixed
    left-icon="left"
    status-bar
    @click-left="router.back"
  />
  <view :style="{ minHeight: 'calc(100vh - 44px - ' + statusBarH + 'px)' }" class="message-contain">
    <view
      :style="{ height: 'calc(100vh - 44px - ' + statusBarH + 'px)' }"
      class="message-contain-list"
    >
      <mescroll-uni
        ref="mescrollRef"
        :down="downOption"
        :fixed="false"
        :up="upOption"
        @down="downCallback"
        @init="mescrollInit"
        @up="upCallback"
      >
        <view
          v-for="(item, index) in list"
          v-if="list.length > 0"
          :key="index"
          class="message-contain-list-item"
        >
          <view class="message-contain-list-item-t">
            <text>{{ item.notifyTitle }} {{ item.createdAt }}</text>
          </view>
          <view class="message-contain-list-item-title">{{ item.notifyTitle }}</view>
          <view class="message-contain-list-item-cont">{{ item.notifyContent }}</view>
        </view>
        <view v-else :style="{ height: 'calc(100vh - 44px - ' + statusBarH + 'px)' }">
          <view class="message-contain-empty">
            <image
              src="https://apt11-1251002327.cos.ap-tokyo.myqcloud.com/miniapp/icon_message_empty.png"
            />
            <view v-if="authStore.isLoggedIn">{{ t('LAKey_messageEmpty') }}</view>
            <view v-else-if="!authStore.isLoggedIn" style="color: #269c74" @click="navigateToLogin">
              {{ t('SignIn') }}
            </view>
          </view>
        </view>
      </mescroll-uni>
    </view>
  </view>
</template>

<style lang="scss" scoped>
.message {
  &-contain {
    &-list {
      padding: 20rpx 24rpx;

      &-item {
        background: #ffffff;
        border-radius: 16rpx;
        padding-top: 24rpx;
        padding-bottom: 4rpx;
        margin-bottom: 20rpx;

        &-t {
          padding: 0 32rpx;
          margin-bottom: 20rpx;
          display: flex;
          align-items: center;
          justify-content: space-between;

          text {
            font-weight: 400;
            font-size: 20rpx;
            color: #979797;
            line-height: 28rpx;
          }

          view {
            width: 16rpx;
            height: 16rpx;
            background: #d13820;
            border-radius: 100%;
          }
        }

        &-img {
          padding: 0 32rpx;
          display: block;
          height: 292rpx;
          border-radius: 16rpx;
          margin-bottom: 20rpx;

          image {
            width: 100%;
            height: 100%;
            border-radius: 16rpx;
          }
        }

        &-title {
          padding: 0 32rpx;
          margin-bottom: 10rpx;
          font-weight: 500;
          font-size: 28rpx;
          color: #3d3d3d;
          line-height: 40rpx;
        }

        &-cont {
          padding: 0 32rpx 20rpx;
          font-weight: 400;
          font-size: 24rpx;
          color: #3d3d3d;
          line-height: 40rpx;
        }

        &-btn {
          border-top: 1px solid #f4f4f4;
          padding: 18rpx 32rpx;
          display: flex;
          align-items: center;
          justify-content: space-between;

          text {
            font-weight: 400;
            font-size: 24rpx;
            color: #269c74;
            line-height: 40rpx;
          }

          image {
            display: block;
            width: 32rpx;
            height: 32rpx;
          }
        }
      }
    }

    &-empty {
      margin: 128rpx auto 0;
      width: 556rpx;
      height: 556rpx;
      position: relative;

      image {
        display: block;
        width: 100%;
        height: 100%;
      }

      view {
        text-align: center;
        font-size: 28rpx;
        color: #afafaf;
        line-height: 44rpx;
        font-weight: 400;
        position: absolute;
        left: 0;
        right: 0;
        bottom: 84rpx;
      }
    }
  }
}
</style>
